<template>
    <FormData ref="formDataRef" :formData="formData" :rules="rules" :title="popupTitle" @submit="handleSubmit"
        @close="handleClose">
        <el-form-item label="管理员名称" prop="username">
            <Input v-model="formData.username" placeholder="请输入管理员名称" />
        </el-form-item>

        <el-form-item label="管理员密码" prop="password" v-if="mode === 'add'">
            <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password clearable />
        </el-form-item>

        <el-form-item label="确认密码" v-if="mode === 'add'" prop="password_confirmation">
            <el-input v-model="formData.password_confirmation" type="password" placeholder="请再次输入密码" show-password
                clearable />
        </el-form-item>

        <el-form-item label="管理员昵称" prop="nickname">
            <Input v-model="formData.nickname" placeholder="请输入管理员昵称" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
                <el-radio :value="1">开启</el-radio>
                <el-radio :value="0">关闭</el-radio>
            </el-radio-group>
        </el-form-item>    
        
  
    </FormData>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import Input from '@/components/formData/components/input.vue'
import { saveAdmin, updateAdd } from '@/api/system/rbac/admin'
import type { FormInstance } from 'element-plus'
import FormData from '@/components/formData/index.vue'

interface FormDataInstance {
    formRef: FormInstance
    open: () => void
    close: () => void
}

const formDataRef = ref<FormDataInstance>()
const emits = defineEmits(['success', 'close'])

// 表单模式：add-新增，edit-编辑
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value === 'add' ? '新增管理员' : '编辑管理员'
})

// 表单数据
interface FormData {
    id?: number
    username: string
    password: string
    password_confirmation: string
    nickname: string
    status: number
}

const formData = reactive<FormData>({
    username: '',
    password: '',
    password_confirmation: '',
    nickname: '',
    status: 1
})

// 表单验证规则
const rules = {
    username: [
        { required: true, message: '请输入管理员名称', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    password_confirmation: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule: any, value: string, callback: Function) => {
                if (value !== formData.password) {
                    callback(new Error('两次输入密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}

// 打开弹窗
const open = (type: string = 'add') => {
    mode.value = type
    formDataRef.value?.formRef?.resetFields()
    formDataRef.value?.open()
}

// 设置表单数据
const setFormData = (row: Partial<FormData>) => {
    Object.assign(formData, row)
}

// 提交表单
const handleSubmit = async (loading: { value: boolean }) => {
    try {
        loading.value = true
        const res = mode.value === 'add' ? await saveAdmin(formData) : await updateAdd(formData)
        ElMessage.success('保存成功')
        emits('success')
        formDataRef.value?.close()
    } catch (error) {
        console.error('保存失败:', error)
    } finally {
        loading.value = false
    }
}

// 关闭弹窗
const handleClose = () => {
    emits('close')
}

// 暴露方法给父组件
defineExpose({
    open,
    setFormData
})
</script>
